<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="id" label="id" width="180" />
      <el-table-column prop="code" label="编码" width="180" />
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="pid" label="父级id" width="180" />
      <el-table-column prop="sorts" label="排序" width="180" />
      <el-table-column prop="createTime" label="创建时间" />
    </el-table>
    <div
      style="
        height: 50px;
        line-height: 50px;
        text-align: right;
        margin-top: 20px;
        display: flex;
        justify-content: center;
      "
    >
      <el-pagination
        background
        :page-size="pageSize"
        :page-sizes="[2, 5, 10, 20, 50]"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { getProductDic } from "@/api/product/product.js";
import { onMounted } from "vue";
import { pid } from "process";
const tableData = ref([]);
//分页条件
const queryForm = ref({
  pid: 0
});

const page = ref(1); //当前页 默认第1页
const pageSize = ref(5); //每页记录数
const total = ref(0); //总记录数

//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 1;
  //查询数据
  query();
}

function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  query();
}

async function query() {
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    pid: 0
  };
  let res = await getProductDic(data);
  if (res.code === 200) {
    tableData.value = res.data.data;
    total.value = res.data.total;
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
  }
}

interface User {
  date: string;
  name: string;
  address: string;
}

const tableRowClassName = ({
  row,
  rowIndex
}: {
  row: User;
  rowIndex: number;
}) => {
  if (rowIndex % 2 === 0) {
    return "warning-row";
  }
  return "";
};

onMounted(() => {
  query();
});
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
